Here we needed to find a way to optimize our expensiveCalculationOnUsers so that it didn't run every time the component rendered, but it did update when the users prop changed.

The first and most simple way to do that is by using useMemo:

const calculatedUsers = useMemo(() => {
  if (users) {
    console.log('OMG this takes forever');
    return users;
  }
  return [];
}, [users]);

However, we can't produce side effects inside of the useMemo function. So, if expensiveCalculationOnUsers relied on a fetch for instance, we would need to turn to useEffect once again.

The version of SelectUsers that is in this branch reflects this reality: we combine useState and useEffect to manage our expensive calculation, and by adding users to the useEffect dependency array, ensure that our component is always synced with the users prop.